<template>
  <div>
    <van-nav-bar
        title="商品列表"
        left-text="返回"
        left-arrow
        @click-left="tzback()"
    />
    <div>
      <van-search
          v-model="name"
          show-action
          label="商品"
          placeholder="请输入商品名字">
        <template #action>
          <div @click="onClickButton()">搜索</div>
        </template>
      </van-search>

    </div>
    <!--  1.头部 可以排序-->
    <div>
      <van-dropdown-menu>
        <van-dropdown-item title="排序" v-model="gwhere.order" :options="orderops" />
        <van-dropdown-item title="条件" ref="item">
          <van-cell center title="包邮">
            <template #right-icon>
              <van-switch v-model="gwhere.baoyou" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <van-cell center title="促销">
            <template #right-icon>
              <van-switch v-model="gwhere.cuxiao" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <van-cell center title="降价">
            <template #right-icon>
              <van-switch v-model="gwhere.jiangjia" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <div style="padding: 5px 16px;">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>

    </div>
    <!--  2.List 上拉分页-->
    <div>
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadData()"
      >
        <van-card v-for="g in goods"
                  :num="g.repertory"
                  :tag="g.tags"
                  :price="g.price"
                  :desc="g.detail"
                  :title="g.title"
                  :thumb="g.imgurl"
                  :origin-price="g.oldprice"
                  @click="tzdetail(g.id,1)"
        />
      </van-list>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
  name: "GoodsList",
  setup() {
    const item = ref(null);

    const onConfirm = () => {
      item.value.toggle();
    };
    return {
      item,onConfirm,

    }
  },
  data(){
    return{
      loading:false,
      finished:false,
      goods:[

      ],
      gwhere:{
        baoyou:false,
        cuxiao:false,
        jiangjia:false,
        order:"0"
      },
      orderops:[
        { text: '综合排序', value: 0 },
        { text: '热度排序', value: 1 },
        { text: '时间排序', value: 2 },
      ]
    }
  },methods:{
    tzback(){
      history.back();
    },
    onClickButton(){
      this.loadData();
    },
    loadData(){
      this.axios.post("/api/goods/list.do",{
        name:this.name,
        page:1,
        size:10,
        type:this.$store.state.good_type.techan
      }).then(res=>{
        if (res.data.code==200){
          this.goods = res.data.data;
        }
      })
      this.loading=true;
    },
    tzdetail(id,t){
      //跳转页面 传递参数 编程式路由 携带参数
      this.$router.push({path:"/detail",query:{gid:id,type:t}});
    }
  }
}
</script>

<style scoped>

</style>